<template>
	<div>
		<van-sticky>
			<van-row class="bannerTop">
				<van-col offset="10" span="10">
					<div class="bannerText">分类</div>
				</van-col>
				
			</van-row>
		</van-sticky>
		<van-dropdown-menu>
		     <van-dropdown-item v-model="value1" @change="changeGoods" :options="option1" />
		     <van-dropdown-item v-model="value2" @change="sortGoods" :options="option2" />
		   </van-dropdown-menu>
		<div  v-for="(item,index) in list" :key='item.id'>
			<van-card
			  @click='toDetail(item)'
			  :price="item.price+'元'"
			  
			  :title="item.content"
			  :thumb="item.img[0]"
			>
			
			</van-card>
			
		
		</div>
	</div>
</template>

<script>
	export default {
		data(){
			return{
				value1: 0,
				 value2: 'a',
				  option1: [
				   { text: '天堂鸟', value: 0 },
				   { text: '冬珊', value: 1 },
				   { text: '乔蒂', value: 2 },
				   { text: '百元香', value: 3 },
				   { text: '向日葵', value: 4 },
				   { text: '家顺', value: 5 },
				  ],
				  option2: [
				    { text: '默认排序', value: 'a' },
				    { text: '好评排序', value: 'b' },
				    { text: '价格排序', value: 'c' },
				  ],
				  list:[]
			}
		},methods:{
			sortGoods(){
				if(this.value2=='a'){
					this.list.sort();
				}else if(this.value2 =='b'){
					this.list.sort((o1,o2)=>{
						let val1 = o1.xingxing;
						let val2 = o2.xingxing;
						if (val1 >val2) {
						        return -1;
						    } else if (val1 <val2) {
						        return 1;
						    } else {
						        return 0;
						    }  
					})
				}else{
					this.list.sort((o1,o2)=>{
						let val1 = o1.price;
						let val2 = o2.price;
						if (val1 < val2) {
						        return -1;
						    } else if (val1 > val2) {
						        return 1;
						    } else {
						        return 0;
						    }  
					})
				}
			},
			changeGoods(){
				
				this.list = this.$request.shopData[this.value1];
				console.log(this.list)				
			},
			toDetail(item){
				this.$router.push({path:'/detail',query:{'goods':item}});
			}
		},
		created(){
			this.changeGoods();
			this.value1 = this.$route.query.id?this.$route.query.id:0;
		}
	}
</script>

<style scoped="">
	.bannerTop{
		background: pink;
		width: 100%;
		height: 50px;
	}
	.bannerText{
		color: white;
		font-size: 18px;
		line-height: 50px;
		font-weight: bold;
	}
</style>
